﻿@{
    ViewBag.Title = "图标列表";
    Layout = "/Views/Shared/_Layout_Easyui.cshtml";
}
@section Styles{
    <style type="text/css">
        table { border: 0; border-spacing: 0; }
        td { padding-left: 10px; padding-right: 10px; }
        .icon_editor_menu { width: 100%; border-bottom: 1px solid #a9a9a9; position: relative; }
            .icon_editor_menu td { height: 40px; }
        .icon_editor_background { position: relative; }
        .icon_editor_toolbar { width: 100%; position: absolute; top: 41px; border-bottom: 1px solid #a9a9a9; display: none; background-color: #fff; -ms-opacity: 0.9; opacity: 0.9; }
        .toolbar_image { height: 600px; }
        .toolbar_upload { height: auto; }
        .toolbar_icon { height: auto; padding-bottom: 10px; }
            .toolbar_icon td { height: 62px; font-size: 16px; }
        .toolbar_upload td { height: 40px; }
        .icon_editor_icon { position: absolute; top: 0; left: 0; border: 1px solid #000; width: 32px; height: 32px; display: none; }
    </style>
}
<div class="icon_editor_menu">
    <table>
        <tr>
            <td>
                <a href="javascript:;" id="icon_editor_button_show_background" class="easyui-linkbutton" data-options="iconCls:'icon-mini-add'">设置背景图片</a>
            </td>
            <td>
                <a href="javascript:;" id="icon_editor_button_show_upload" class="easyui-linkbutton" data-options="iconCls:'icon-mini-add'">上传图片</a>
            </td>
            <td>
                <a href="javascript:;" id="icon_editor_button_show_icon" class="easyui-linkbutton" data-options="iconCls:'icon-mini-add'">设置图标</a>
            </td>
            <td>
                <a href="javascript:;" id="icon_editor_button_show_add" class="easyui-linkbutton" data-options="iconCls:'icon-mini-add'">添加图标</a>
            </td>
        </tr>
    </table>
</div>
<div class=" icon_editor_background">
    <div class="icon_editor_icon">
    </div>
</div>
<div class="icon_editor_toolbar toolbar_image" id="icon_editor_toolbar_image">
    <div id="icon_editor_image_panel">
    </div>
</div>
<div class="icon_editor_toolbar toolbar_upload" id="icon_editor_toolbar_upload">
    <table>
        <tr>
            <td>
                <input type="file" id="icon_editor_from_upfile" name="bagFile" />
            </td>
            <td>
                <a href="javascript:;" id="icon_editor_button_upfile" class="easyui-linkbutton" data-options="iconCls:'icon-mini-add'">上传图片 </a>
            </td>
        </tr>
    </table>
</div>
<div class="icon_editor_toolbar toolbar_icon" id="icon_editor_toolbar_icon">
    <table>
        <tr>
            <td>
                width:
            </td>
            <td>
                <input id="icon_editor_slider_width" />
            </td>
        </tr>
        <tr>
            <td>
                height:
            </td>
            <td>
                <input id="icon_editor_slider_height" />
            </td>
        </tr>
        <tr>
            <td>
                top:
            </td>
            <td>
                <input id="icon_editor_slider_top" />
            </td>
        </tr>
        <tr>
            <td>
                left:
            </td>
            <td>
                <input id="icon_editor_slider_left" />
            </td>
        </tr>
    </table>
</div>
<div id="icon_editor_from" style="display: none">
    <ul class="icon_editor_from">
        <li>图标样式:</li>
        <li>
            <input type="text" id="icon_editor_from_style" />
        </li>
        <li>
            <a id="icon_editor_from_submit" href="javascript:;"></a>
        </li>
        <li>
            <a id="icon_editor_from_cancel" href="javascript:;"></a>
            <input type="hidden" id="icon_editor_from_url" />
        </li>
    </ul>
</div>

@section Scripts{
    <script type="text/javascript" src="~/Content/Scripts/ajaxfileupload.js"></script>
    <script type="text/javascript">
        (function () {
            Oneworks.CreatePage('IconList', function () {
            }, {
                slider: {
                    width: $('.icon_editor_icon'),
                    height: $('.icon_editor_icon'),
                    top: $('.icon_editor_icon'),
                    left: $('.icon_editor_icon')
                },
                icon: $('.icon_editor_icon'),
                background: $('.icon_editor_background'),
                toolbar: $('.icon_editor_toolbar'),
                iconTool: $('#icon_editor_toolbar_icon'),
                imgTool: $('#icon_editor_toolbar_image'),
                imgToolPanel: $('#icon_editor_image_panel'),
                uploadTool: $('#icon_editor_toolbar_upload'),
                showImage: $('#icon_editor_button_show_background'),
                showUpload: $('#icon_editor_button_show_upload'),
                showIcon: $('#icon_editor_button_show_icon'),
                btnUpload: $('#icon_editor_button_upfile'),
                sliderWidth: $('#icon_editor_slider_width'),
                sliderTop: $('#icon_editor_slider_top'),
                sliderLeft: $('#icon_editor_slider_left'),
                sliderHeight: $('#icon_editor_slider_height'),
                from: $('#icon_editor_from'),
                fromSubmit: $('#icon_editor_from_submit'),
                fromCancel: $('#icon_editor_from_cancel'),
                fromUrl: $('#icon_editor_from_url'),
                init: function () {
                    var that = this;
                    that.initImage();
                    that.initIcon();
                    that.initSlider();
                    that.initFrom();
                    that.showImage.click(function () {
                        that.toggle('image');
                    });
                    that.showUpload.click(function () {
                        that.toggle('upload', 200);
                    });
                    that.showIcon.click(function () {
                        that.toggle('icon', 200);
                    });
                    that.btnUpload.click(function () {
                        that.upload();
                    });
                    that.icon.dblclick(function () {
                        that.from.window('open');
                    });
                },
                initImage: function () {
                    var that = this;
                    that.imgToolPanel.panel({
                        fit: true,
                        href: 'http://www.bj-oneworks.com/image/show',
                        border: false,
                        onLoad: function () {
                            Oneworks.RunPage('ImageShow', {
                                minWidth: 120,
                                minHeight: 100,
                                imageClick: function () {
                                    var data = $.parseJSON($(this).attr('data'));
                                    that.background.css({
                                        width: data.Width,
                                        height: data.Height,
                                        backgroundImage: 'url(' + data.Url + ')',
                                        backgroundRepeat: 'no-repeat'
                                    });
                                    that.icon.show();
                                    that.sliderTop.slider({ max: data.Height - that.icon.outerHeight() });
                                    that.sliderLeft.slider({ max: data.Width - that.icon.outerWidth() });
                                    that.toggle('image', 200);
                                    that.fromUrl.val(data.Url);
                                }
                            });
                        }
                    });
                },
                initIcon: function () {
                    var that = this;
                    that.icon.draggable({
                        onDrag: function (e) {
                            var d = e.data;
                            if (d.left < 0) {
                                d.left = 0;
                            }
                            if (d.top < 0) {
                                d.top = 0;
                            }
                            if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
                                d.left = $(d.parent).width() - $(d.target).outerWidth();

                            }
                            if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
                                d.top = $(d.parent).height() - $(d.target).outerHeight();

                            }
                            setTimeout(function () {
                                that.sliderTop.slider('setValue', d.top);
                                that.sliderLeft.slider('setValue', d.left);
                            }, 500);

                        }
                    });
                },
                initSlider: function () {
                    var that = this;
                    that.sliderWidth.slider({
                        width: 200,
                        showTip: true,
                        value: 32,
                        min: 18,
                        max: 128,
                        onChange: function (newValue, oldValue) {
                            that.icon.width(newValue);
                        }
                    });
                    that.sliderHeight.slider({
                        width: 200,
                        showTip: true,
                        value: 32,
                        min: 18,
                        max: 128,
                        onChange: function (newValue, oldValue) {
                            that.icon.height(newValue);
                        }
                    });
                    that.sliderTop.slider({
                        width: 200,
                        showTip: true,
                        value: 0,
                        onChange: function (newValue, oldValue) {
                            that.icon.css({ top: newValue });
                        }
                    });
                    that.sliderLeft.slider({
                        width: 200,
                        showTip: true,
                        value: 0,
                        onChange: function (newValue, oldValue) {
                            that.icon.css({ left: newValue });
                        }
                    });
                },
                initFrom: function () {
                    var that = this;
                    that.from.show();
                    that.from.Easyui().window({ title: '图标添加', widht: 300, height: 200 });
                    that.fromSubmit.linkbutton({ text: '添加' });
                    that.fromSubmit.click(function () {
                        $.ajax({

                        });
                    });
                    that.fromCancel.linkbutton({ text: '取消' });
                    that.fromCancel.click(function () {
                        that.from.window('close');
                    });
                },
                upload: function () {
                    var that = this;
                    $.ajaxFileUpload({
                        url: '/File/Upload',
                        secureuri: false,
                        fileElementId: 'icon_editor_from_upfile',
                        dataType: 'json',
                        success: function (data) {
                            if (data.result) {
                                var img = new Image();
                                img.src = data.message;
                                img.onload = function () {
                                    that.setBackground({
                                        width: img.width,
                                        height: img.height,
                                        backgroundImage: 'url(' + data.message + ')',
                                        backgroundRepeat: 'no-repeat'
                                    });
                                    that.icon.show();
                                    that.sliderTop.slider({ max: img.Height - that.icon.outerHeight() });
                                    that.sliderLeft.slider({ max: img.Width - that.icon.outerWidth() });
                                    that.toggle('upload', 200);
                                    that.fromUrl.val(data.Url);
                                };
                            } else {
                                $.messager.alert('错误提示', '上传图片失败,' + data.message, 'info');
                            }
                        },
                        error: function (data, status, e) {
                            $.messager.alert('错误提示', '上传图片失败,' + e, 'info');
                        }
                    });
                },
                toggle: function (type, num) {
                    if (typeof num !== 'number') num = 0;
                    var that = this, s, h, sd, hd, tool = that.toolbar;
                    switch (type) {
                        case 'image':
                            s = that.imgTool;
                            break;
                        case 'upload':
                            s = that.uploadTool;
                            break;
                        case 'icon':
                            s = that.iconTool;
                            break;
                        default:
                            return;
                    }
                    sd = s.css('display');
                    if (sd === 'none') {
                        tool.hide(num);
                        s.show(num);
                    } else {
                        s.hide(num);
                    }
                },
                setIcon: function (options) {
                    this.icon.css(options);
                },
                setBackground: function (options) {
                    this.background.css(options);
                }
            });
            Oneworks.RunPage('IconList');
        }());

    </script>
}
